<template>
	<view class="storeCode">
		<view class="title">
			<view class="title_search">
				<u-search placeholder="搜索商户名称、商户UID、门店ID" v-model="keyword" shape="square" @custom="getshoplist(true)"></u-search>
			</view>
			<view class="title_tab">
				<u-tabs :list="tab.list" :is-scroll="false" :current="tab.current" @change="tabchange" font-size="28" active-color="#007AFF"></u-tabs>
			</view>
		</view>
		<view v-if="shop.shopdataList.length==0" class="content">
			<noData></noData>
		</view>
		<scroll-view v-else class="content" scroll-y="true" @scrolltolower="getshoplist">
			<view class="conList_item" v-for="(item,index) in shop.shopdataList">
				<view class="conList_title" @click="navDetail(item)">
					<view class="title_name">
						<text>{{item.shop_name}}</text>
						<text class="title_size" :class="statusColor[item.status]">{{item.statusText}}</text>
					</view>
					<view class="title_id">
						<text>商户UID:&nbsp&nbsp{{item.uid}}</text>
						<text>门店ID:&nbsp&nbsp{{item.suid}}</text>
					</view>
				</view>
				<view class="conList_info conList_info_btn" v-if="item.status==2 || (item.status==3&&!item.imge_detail)">
					<view v-if="item.status==2">
						<button type="primary" @click="qrShow(item)">确认开通</button>
					</view>
					<view v-if="item.status==3&&!item.imge_detail">
						<button type="primary" @click="photoShow(item)">上传物料</button>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup v-model="qrcodeShow" mode="center">
			<view class="popQrcode">
				<view class="popQrcode_title">商户打开支付宝，扫一扫确认开通</view>
				<image class="popQrcode_image" :src="curQrcode"></image>
			</view>
		</u-popup>
		<u-action-sheet :list="sheet.list" v-model="sheet.show" @click="photoSel"></u-action-sheet>
	</view>
</template>

<script>
	import config from '../../util/config.js'
	import { alipayshoplist,uploadalipaypic,bindmaterials } from '../../api/index.js'
	import noData from '../../components/data/nodata.vue'
	export default {
		data() {
			return {
				qrcodeShow: false, //控制二维码弹窗是否显示
				keyword:"",
				tab:{
					list: [{
						name: '全部'
					}, {
						name: '审核失败'
					}, {
						name: '审核成功'
					}, {
						name: '审核中'
					}],
					current: 0
				},
				statusColor:{
					'3':'bluefont',//审核成功
					'2':'orangefont',//审核中
					'4':'redfont' ,//审核失败
				},
				//弹窗对象
				poptype:{
					type:'1', //当前显示的类型 0:未入住 1:已入驻
					show:false, //弹窗是否显示
				},
				shop:{
					shopstatus:0,
					page:1,
					isLoad:false,//判断之前的请求是否还未结束
					isAll:false,//判断是否加载了全部数据
					shopdataList:[]
				},
				sheet:{
					list: [{
						text: '拍照'
					}, {
						text: '从相册中选择' 
					}],
					show: false
				},
				curItem:'',  //当前选中的门店码
				curQrcode:'',//当前显示的二维码
				isFirstLoad:true  //当前是否第一次加载页面
			}
		},
		onShow:function(){
			if(this.isFirstLoad){
				this.getshoplist(true);
				this.isFirstLoad = false;
			}
		},
		methods: {
			tabchange:function(index){
				if(this.shop.isLoad === true){
					return ;
				}
				let indexObj = {
					'0':'',//全部
					'1':'4',//审核失败
					'2':'3',//审核成功
					'3':'2' //审核中
				};
				this.shop.shopstatus = indexObj[index];
				this.shop.page = 1;
				this.shop.isAll = false;
				this.tab.current = index;
				this.getshoplist(true)
			},
			typeSw:function(type){
				this.poptype.type = type;
			},
			navDetail:function(item){
				item.confirm_url = ''//防止字符串解析失败
				uni.navigateTo({
					url:`../storeCodeDetail/storeCodeDetail?detailData=${JSON.stringify(item)}`,
					success: () => {
						this.isFirstLoad = true
					}
				})
			},
			//获取我的商户列表
			async getshoplist(isSw){
				let that = this;
				if(isSw===true){ //如果是切换逻辑
					this.shop.isAll = false;
					this.shop.isLoad = false;
					this.shop.page = 1;
				}else{ //如果是列表加载逻辑
					if(this.shop.isLoad || this.shop.isAll){ //假如之前的请求未完成或者列表数据已经全部加载完毕，则返回空
						console.log("请求未完成或者列表数据已经全部加载完毕")
						return ;
					}
					this.shop.isLoad = true;
				}
				
				let data = await alipayshoplist({
					status:that.shop.shopstatus,
					page:that.shop.page,
					keyword:that.keyword
				});
				console.log(data)
				let deallist = that.deallist(data.data);//返回已处理的数据
				if(isSw === true){//判断是否重新加载数据
					that.shop.shopdataList = deallist;
				}else{
					that.shop.shopdataList = that.shop.shopdataList.concat(deallist);
				}
				
				this.$nextTick(() => {
				    that.shop.page += 1;
				    that.shop.isLoad = false;
				    if(deallist.length < 20){
				    	that.shop.isAll = true;
				    }
				});
			},
			deallist:function(datalist){
				let statusTextObj = {
					'2':'审核中',
					'3':'审核成功',
					'4':'审核失败',
					'-1':'M3升级失败',
					'1':'审核通过' //审核通过的状态默认改为审核中
				};
				datalist.forEach((val,index,arr)=>{
					if(val.status == 1){
						this.$set(val,'status',2) //审核通过的状态默认改为审核中
					}
					val.statusText = statusTextObj[val.status]
				})
				return datalist;
			},
			//显示图片选择弹窗
			photoShow:function(item){
				this.curItem = item;
				this.sheet.show = true;
			},
			//显示二维码弹窗
			qrShow:function(item){
				this.curQrcode = config.mengxiaoer.BASE_URL + config.mengxiaoer.RETAIL + config.mengxiaoer.VERSION_CODE + '/alipaycodeimg?url=' + item.confirm_url
				this.qrcodeShow = true;
			},
			//选择照片
			photoSel:function(index){
				console.log(index)
				let that = this;
				let sourceType = [];
				if(index==0){
					sourceType = 'camera';
				}else{
					sourceType = 'album';
				}
				cm.chooseImage({
					count:1,
					sourceType:sourceType,
					success:function(res){
						let base64Obj = JSON.parse(res);
						console.log(base64Obj)
						let baseStr = '';
						if(index == 0){
							baseStr = base64Obj.base64String;
						}else{
							baseStr = base64Obj.base64StringArray[0];
						}
						that.updateImgfun(baseStr);
					},
					fail:function(){
						uni.showToast({
							icon:'none',
							title:'获取图片失败'
						})
					}
				});
			},
			//修改图片逻辑
			async updateImgfun(base64){
				let that = this;
				let uploadimgData = await uploadalipaypic({
					image_base64:base64
				}); //base64转图片
				console.log(uploadimgData)
				if(uploadimgData.code == 0){
					bindmaterials({
						suid: this.curItem.suid,
						img_id: uploadimgData.data.img_id
					}).then((data) => {
						console.log(data);
						if(data.code == 0){
							uni.showToast({
								icon:'none',
								title:'上传图片成功',
								duration: 2000
							})
							//如果上传图片成功则重新加载列表
							that.shop.page = 1;
							that.shop.isAll = false;
							that.getshoplist(true)
						}else{
							uni.showToast({
								icon:'none',
								title:uploadimgData.res,
								duration: 2000
							})
						}
					}).catch((e)=>{
						console.log(e);
					})
				}else{
					uni.showToast({
						icon:'none',
						title:uploadimgData.res
					})
				}
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:`../storeCodeApplication/storeCodeApplication`,
				success: () => {
					this.isFirstLoad = true
				}
			})
		},
		components:{
			noData
		}
	}
</script>

<style lang="scss" scoped>
	.storeCode{
		height: 100%;
		font-size: $uni-font-size-base;
		position: relative;
		.title{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			width: 100%;
			background-color: #FFFFFF;
			.title_search{
				padding: 20rpx 30rpx;
				border: 1rpx solid #E6E6E6;
			}
		}
		.content{
			height: 100%;
			padding-top: 200rpx;
			background-color: #F5F5F5;
			box-sizing: border-box;
			.conList_item{
				margin: 20rpx 30rpx 20rpx 30rpx;
				padding: 30rpx;
				border-radius: $uni-border-radius-base;
				background-color: #FFFFFF;
				&:nth-last-child(1){
					margin-top: 0;
				}
				.conList_title{
					.title_name{
						color: $uni-text-color;
						font-size: $uni-font-size-lg;
						font-weight: bold;
						.title_size{
							float: right;
							font-weight: normal;
							font-size: $uni-font-size-base;
							&.red{
								color: #F94441;
							}
							&.blue{
								color: #007AFF;
							}
						}
					}
					.title_id{
						color: $uni-text-color-grey;
						font-size: $uni-font-size-sm;
						padding: 10rpx 0 20rpx 0;
						text{
							margin-right: 20rpx;
						}
					}
				}
				.conList_info{
					padding: 20rpx 0 0 0;
					&.conList_info_btn{
						display: flex;
						width: 100%;
						justify-content: flex-end;
						border-top: 1rpx solid #E5E5E5;
						button{
							border-radius: 100rpx;
							font-size: $uni-font-size-sm;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
		.popQrcode{
			padding: 30rpx;
			.popQrcode_title{
				text-align: center;
				font-weight: bold;
				padding-bottom: 30rpx;
			}
			.popQrcode_image{
				width: 500rpx;
				height: 500rpx;
			}
		}
	}
	.nodata{
		margin-top: 100rpx;
	}
</style>
